/* 右边部分 */
.index-right{
  overflow: hidden;
  /* border: 1px solid black; */
  width: 100%;
  height: 100%;
}
/* .el-main {
  overflow: hidden;
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
} */
.right-personal{
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
/* 右边第一部分 */
.personal-class{
  /* border: 1px solid pink; */
  width: 100%;
  min-height: 250px;
  background-color: #fff;
}
.personal-class h2{
  font-family: PingFangSC-Regular;
  padding: .5rem 70rem 1.9rem .24rem;
  font-size: 18px;
  color: #333;
}
.class-list{
  /* border: 1px solid orange; */
  width: 100%;
  height: 180px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -ms-flexbox;
  display: flex;
}
.list-card{
  /* border: 1px solid olivedrab; */
  width: 317px;
  height: 180px;
  position: relative;
}
/* 卡片 */
.card-course{
  box-shadow: 0 0.02rem 0.1rem 0 rgba(0,0,0,.2);
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  margin-left: 8%;
  width: 295px;
  height: 135px;
  color: #000;
  text-align: center;
  /* margin-left: 7%; */
  border-radius: .5rem;
  background-color: #f5f5f5;
}
/* 标题 */
.card-course .text-title{
  color: #fff;
  padding: .24rem .3rem .6rem;
  font-family: PingFangSC-Regular;
  padding: 1.27rem 0 .8rem .24rem;
  font-size: 1.9rem;
}
/* 文本 */
.card-course .text-content{
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
}
/*上课 */
.card-course .content-class{
  background: #fcc800;
  width: 42.85%;
  margin-top: 2.8rem;
  background-image: none;
  padding: .5rem .16rem;
  color: #fff;
  font-size: 1.14rem;
  cursor: pointer;
  text-align: center;
  border-radius: .5rem;
  vertical-align: middle;
  display: inline-block;
  font-family: PingFangSC-Regular;
}
.triangle{
  border-color: #3986f7 transparent transparent;
  width: 0;
  height: 0;
  border-width: 1.1rem;
  border-style: solid;
  /* border-color: #f5f5f5 transparent transparent; */
  right: 43%;
  position: absolute;
}
.card-progress{
  /* border: 1px solid lightgreen; */
  margin-left: 8%;
  margin-top: 10px;
  position: relative;
  width: 92%;
  height: 27px;
}
.card-progress .line{
  margin-top: .2rem;
  width: 100%;
  height: .01rem;
  display: block;
  background-color: #d8d8d8;
}
.card-progress .circular{
  background-color: #3986f7;
  right: 49%;
  width: .9rem;
  height: .9rem;
  display: block;
  border-radius: 50%;
  top: .2rem;
  position: absolute;
}
.card-progress .title{
  padding-top: 1.2rem;
  font-size: 1.14rem;
  color: #d9d9d9;
  margin-left: .24rem;
  text-align: center;
  color: #3986f7;
  margin-left: 0;
}
/* 右边第二部分 */
.personal-class-two{
  color: black;
  /* border:1px solid skyblue; */
  margin-top: .9rem;
  background-color: #fff;
  width: 100%;
  min-height: 250px;
}
.personal-class-two h2{
  font-family: PingFangSC-Regular;
  padding: .5rem 70rem 1.9rem .24rem;
  font-size: 18px;
  color: #333;
}
.personal-class-two .text-title,.text-content{
  color: black;
}
.personal-class-two .text-content{
  color: black;
}
.personal-class-two .content-class{
  background-image: linear-gradient(-90deg,#1c5edc,#1a99f9);
}
.personal-class-two .card-course{
  box-shadow: 0 0.02rem 1.1rem 0 rgba(0,0,0,.2);
  background-color: #fff!important;
  background-image: none!important;
}
.personal-class-two .line{
  margin-top: 1.2rem;
  width: 100%;
  height: .1rem;
  display: block;
  background-color: #d8d8d8;
}
.personal-class-two .triangle{
  border-color: #fff transparent transparent!important;
  width: 0;
  height: 0;
  border-width: .9rem;
  border-style: solid;
  border-color: #f5f5f5 transparent transparent;
  right: 43%;
  position: absolute;
}
.personal-class-two .circular{
  margin-top:-.5rem;
}
/* 班级管理 */
.personal-report{
  width:100%;
}
.personal-report-title{
  /* border: 1px solid yellow; */
  width:100%;
  height: 56px;
  font-family: PingFangSC-Regular;
  margin-top: .5rem;
  padding-right: 71rem;
  line-height: 56px;
  font-size: 1.7rem;
  color: #333;
  background-color: #fff;
}
/* 第一个班级 */
.report-card{
  /* border:1px solid red; */
  margin-top: .9rem;
  height: 131px;
  background-color: #fff;
  width: 100%;
}
.info-body{
  color: #000;
  height: 100%;
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
}
.class-info{
  /* border:1px solid black; */
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 75.88px;
}
.info-left{
  /* border: 1px solid blue; */
  width: 650px;
  height: 73px;
  display: -ms-flexbox;
  display: flex;
}
.left-order{
  /* border: 1px solid yellow; */
  text-align: center;
  background-image: linear-gradient(-238deg,#1064dc,#2387ee 19%,#2f9cf9 49%,#2285ed 75%,#1064dc);
  box-shadow: inset 0 0 4px 1px rgba(89,227,255,.5);
  border-radius: .5rem;
  width: 39px;
  height: 45px;
  margin: 1.32rem 1.2rem 0;
}
.left-order span{
  line-height: 39px;
  font-size: 14px;
  color: #fff;
  border-radius: .3rem;
  margin-top: .3rem;
  width: 3.1rem;
  height: 38px;
  display: inline-block;
  background-image: linear-gradient(-238deg,#207bfe,#449ffd 29%,#4faefe 49%,#469efc 68%,#207bfe);
  border: 0 solid hsla(0,0%,100%,.4);
  box-shadow: inset 0 0 1px 2px rgba(225,246,255,.25);
}
.info-text{
  /* border: 1px solid blueviolet; */
  text-align: left;
  margin-top: 1.25rem;
  width: 60%;
}
.info-text .text-title{
  font-family: PingFangSC-Semibold;
  width: 80%;
  padding-bottom: .9rem;
  font-size: 1.8rem;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 90px;
}
.info-text .text-content{
  color: black;
  margin-left: 5px;
  text-align: left;
}
.info-right{
  /* border: 1px solid greenyellow; */
  width: 244px;
  height: 75px;
  margin-right: 2%;
  right: 2%;
  padding-top:12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  list-style: none;
}
.info-right btns-item{
  /* border: 1px solid black; */
  width: auto;
  height: auto;
  margin-top: .25rem;
  text-align: center;

}
/* 图型 */
.btns-item .btns-icon-body {
  width: 35px;
  height: 35px;
  line-height: .42rem;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  border-radius: 50%;
}
/* 图像 */
.btns-item .btns-icon-body i{
  margin-top: 6px;
  text-align: center;
  font-size: 2.25rem;
  color: #c8e7ff;
}
.btns-item span {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: #666;
}
.progress-line{
  /* border: 1px solid lawngreen; */
  width: 95.5%;
  height: 3.5px;
  background-color: #f0f0f0;
  margin-top: 1.89rem;
  left: 2%;
  position: relative;
}
.progress{
  width:100%;
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  height: 100%;
}
.progress-line .circular{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  box-shadow: 0 0 0.15rem #189af9;
  background-color: #189af9;
  top: -.4rem;
  position: absolute;
  margin-left: 838px;
}
.line-text{
  left:99%;
  font-family: PingFangSC-Regular;
  font-size: 1.12rem;
  color: #4c72ff;
  top: .6rem;
  position: absolute;
}
.yellow{
  background-image: linear-gradient(90deg,#e89b00,#fcc800);
}
.light-green{
  background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);
}
/* 右边部分 */
.index-right{
  overflow: hidden;
  /* border: 1px solid black; */
  width: 80%;
  height: 100%;
}
.el-main {
  overflow: hidden;
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
}
.right-personal{
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
/* 右边第一部分 */
.personal-class{
  /* border: 1px solid pink; */
  width: 100%;
  min-height: 250px;
  background-color: #fff;
}
.personal-class h2{
  font-family: PingFangSC-Regular;
  padding: .5rem 70rem 1.9rem .24rem;
  font-size: 18px;
  color: #333;
}
.class-list{
  /* border: 1px solid orange; */
  width: 100%;
  height: 180px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -ms-flexbox;
  display: flex;
}
.list-card{
  /* border: 1px solid olivedrab; */
  width: 317px;
  height: 180px;
  position: relative;
}
/* 卡片 */
.card-course{
  box-shadow: 0 0.02rem 0.1rem 0 rgba(0,0,0,.2);
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  margin-left: 8%;
  width: 295px;
  height: 135px;
  color: #000;
  text-align: center;
  /* margin-left: 7%; */
  border-radius: .5rem;
  background-color: #f5f5f5;
}
/* 标题 */
.card-course .text-title{
  color: #fff;
  padding: .24rem .3rem .6rem;
  font-family: PingFangSC-Regular;
  padding: 1.27rem 0 .8rem .24rem;
  font-size: 1.9rem;
}
/* 文本 */
.card-course .text-content{
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
}
/*上课 */
.card-course .content-class{
  background: #fcc800;
  width: 42.85%;
  margin-top: 2.8rem;
  background-image: none;
  padding: .5rem .16rem;
  color: #fff;
  font-size: 1.14rem;
  cursor: pointer;
  text-align: center;
  border-radius: .5rem;
  vertical-align: middle;
  display: inline-block;
  font-family: PingFangSC-Regular;
}
.triangle{
  border-color: #3986f7 transparent transparent;
  width: 0;
  height: 0;
  border-width: 1.1rem;
  border-style: solid;
  /* border-color: #f5f5f5 transparent transparent; */
  right: 43%;
  position: absolute;
}
.card-progress{
  /* border: 1px solid lightgreen; */
  margin-left: 8%;
  margin-top: 10px;
  position: relative;
  width: 92%;
  height: 27px;
}
.card-progress .line{
  margin-top: .2rem;
  width: 100%;
  height: .01rem;
  display: block;
  background-color: #d8d8d8;
}
.card-progress .circular{
  background-color: #3986f7;
  right: 49%;
  width: .9rem;
  height: .9rem;
  display: block;
  border-radius: 50%;
  top: .2rem;
  position: absolute;
}
.card-progress .title{
  padding-top: 1.2rem;
  font-size: 1.14rem;
  color: #d9d9d9;
  margin-left: .24rem;
  text-align: center;
  color: #3986f7;
  margin-left: 0;
}
/* 右边第二部分 */
.personal-class-two{
  color: black;
  /* border:1px solid skyblue; */
  margin-top: .9rem;
  background-color: #fff;
  width: 100%;
  min-height: 250px;
}
.personal-class-two h2{
  font-family: PingFangSC-Regular;
  padding: .5rem 70rem 1.9rem .24rem;
  font-size: 18px;
  color: #333;
}
.personal-class-two .text-title,.text-content{
  color: black;
}
.personal-class-two .text-content{
  color: black;
}
.personal-class-two .content-class{
  background-image: linear-gradient(-90deg,#1c5edc,#1a99f9);
}
.personal-class-two .card-course{
  box-shadow: 0 0.02rem 1.1rem 0 rgba(0,0,0,.2);
  background-color: #fff!important;
  background-image: none!important;
}
.personal-class-two .line{
  margin-top: 1.2rem;
  width: 100%;
  height: .1rem;
  display: block;
  background-color: #d8d8d8;
}
.personal-class-two .triangle{
  border-color: #fff transparent transparent!important;
  width: 0;
  height: 0;
  border-width: .9rem;
  border-style: solid;
  border-color: #f5f5f5 transparent transparent;
  right: 43%;
  position: absolute;
}
.personal-class-two .circular{
  margin-top:-.5rem;
}
/* 班级管理 */
.personal-report{
  width:100%;
}
.personal-report-title{
  /* border: 1px solid yellow; */
  width:100%;
  height: 56px;
  font-family: PingFangSC-Regular;
  margin-top: .5rem;
  padding-right: 71rem;
  line-height: 56px;
  font-size: 1.7rem;
  color: #333;
  background-color: #fff;
}
/* 第一个班级 */
.report-card{
  /* border:1px solid red; */
  margin-top: .9rem;
  height: 131px;
  background-color: #fff;
  width: 100%;
}
.info-body{
  color: #000;
  height: 100%;
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
}
.class-info{
  /* border:1px solid black; */
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 75.88px;
}
.info-left{
  /* border: 1px solid blue; */
  width: 650px;
  height: 73px;
  display: -ms-flexbox;
  display: flex;
}
.left-order{
  /* border: 1px solid yellow; */
  text-align: center;
  background-image: linear-gradient(-238deg,#1064dc,#2387ee 19%,#2f9cf9 49%,#2285ed 75%,#1064dc);
  box-shadow: inset 0 0 4px 1px rgba(89,227,255,.5);
  border-radius: .5rem;
  width: 39px;
  height: 45px;
  margin: 1.32rem 1.2rem 0;
}
.left-order span{
  line-height: 39px;
  font-size: 14px;
  color: #fff;
  border-radius: .3rem;
  margin-top: .3rem;
  width: 3.1rem;
  height: 38px;
  display: inline-block;
  background-image: linear-gradient(-238deg,#207bfe,#449ffd 29%,#4faefe 49%,#469efc 68%,#207bfe);
  border: 0 solid hsla(0,0%,100%,.4);
  box-shadow: inset 0 0 1px 2px rgba(225,246,255,.25);
}
.info-text{
  /* border: 1px solid blueviolet; */
  text-align: left;
  margin-top: 1.25rem;
  width: 60%;
}
.info-text .text-title{
  font-family: PingFangSC-Semibold;
  width: 80%;
  padding-bottom: .9rem;
  font-size: 1.8rem;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 90px;
}
.info-text .text-content{
  color: black;
  margin-left: 5px;
  text-align: left;
}
.info-right{
  /* border: 1px solid greenyellow; */
  width: 244px;
  height: 75px;
  margin-right: 2%;
  right: 2%;
  padding-top:12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  list-style: none;
}
.info-right btns-item{
  /* border: 1px solid black; */
  width: auto;
  height: auto;
  margin-top: .25rem;
  text-align: center;

}
/* 图型 */
.btns-item .btns-icon-body {
  width: 35px;
  height: 35px;
  line-height: .42rem;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  border-radius: 50%;
}
/* 图像 */
.btns-item .btns-icon-body i{
  margin-top: 6px;
  text-align: center;
  font-size: 2.25rem;
  color: #c8e7ff;
}
.btns-item span {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: #666;
}
.progress-line{
  /* border: 1px solid lawngreen; */
  width: 95.5%;
  height: 3.5px;
  background-color: #f0f0f0;
  margin-top: 1.89rem;
  left: 2%;
  position: relative;
}
.progress{
  width:100%;
  background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
  height: 100%;
}
.progress-line .circular{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  box-shadow: 0 0 0.15rem #189af9;
  background-color: #189af9;
  top: -.4rem;
  position: absolute;
  margin-left: 838px;
}
.line-text{
  left:99%;
  font-family: PingFangSC-Regular;
  font-size: 1.12rem;
  color: #4c72ff;
  top: .6rem;
  position: absolute;
}
.yellow{
  background-image: linear-gradient(90deg,#e89b00,#fcc800);
}
.light-green{
  background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);
}
